<template>
        <el-row :gutter="24">
            <el-col >
                <h1 class="title">添加分类类型</h1>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                    <el-form-item label="分类类型名称" prop="name">
                        <el-input v-model="ruleForm.name" placeholder="请输入名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="分类类型排序" prop="region">
                         <el-input v-model="ruleForm.region" type="number" placeholder="请输入排序数字" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')" :loading="isLoading">立即提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col >
                <h1 class="title">分类类型列表</h1>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="分类类型名称">
                    <el-input v-model="formInline.id" placeholder="类型名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                    <el-button type="primary" @click="onSearch" v-waves icon="el-icon-search">搜索</el-button>
                    </el-form-item>
                </el-form>
                <el-table
                :data="tableData"
                v-loading="tableloading"
                border
                :row-class-name="tableRowClassName"
                style="width: 100%">
                <el-table-column
                type="index"
                    width="55">
                </el-table-column>
                <el-table-column
                    sortable
                    align="center"
                    prop="date"
                    label="创建日期"
                    width="190">
                    <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
                    </template>
                </el-table-column>
                    <el-table-column
                    align="center"
                    prop="typeName"
                    label="名称"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    align="center"
                        prop="ranking"
                        label="排序"
                        width="120">
                    </el-table-column>
                        <el-table-column  align="center" label="操作" min-width="190" fixed="right">
                            <template slot-scope="scope">
                                <el-button type="primary" size="small" icon="el-icon-edit" @click="handleEdit(scope)">编辑</el-button>
                                <el-button type="danger" size="small" icon="el-icon-delete"  @click="handleDelete(scope)">删除</el-button>
                            </template>
                        </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination
                        background
                        @size-change="pageSizeChange"
                        @current-change="pageIndexChange"
                        :current-page="pageIndex"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="dataTotal"
                    ></el-pagination>
                </div>
                <el-dialog :visible.sync="dialogVisible" title="编辑分类类型">
                    <el-form :model="role" label-width="80px" label-position="left">
                        <el-form-item label="名称">
                            <el-input v-model="role.name" placeholder="输入名称" clearable/>
                        </el-form-item>
                        <el-form-item label="排序">
                            <el-input v-model="role.rank" placeholder="输入排序" clearable/>
                        </el-form-item>
                    </el-form>
                    <div style="text-align:right;">
                        <el-button type="danger" @click="cancel">取消</el-button>
                        <el-button type="primary" @click="confirm">确定</el-button>
                    </div>
                </el-dialog>
            </el-col>
        </el-row>
</template>

<script>
import waves from '@/directive/waves/index.js';
import { addResourceType,getResourceTypeDataTable,getResourceTypeDetail,editedType,deleteType} from "@/api/index.js"
export default {
    directives: {
        waves
    },
    data() {
        return {
            tableData: [],
            tableloading : false,
            isLoading : false,
            pageIndex: this.$store.getters.getOrderListIndex,
            pageSize: 10,
            dataTotal: 0,
            dialogVisible: false,
            role: {
                typeId : '',
                name : '',
                rank : '',
            },
            formInline: {
                id: '',
            },
            ruleForm: {
                name: '',
                region: '',
                type: [],
                resource: '',
                desc: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请输入排序数字', trigger: 'blur' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        //////分页
        pageIndexChange(val) {
            this.pageIndex = val;
            this.$store.dispatch('setOrderListIndex', val)
            this.getList();
        },
        pageSizeChange(val) {
        },
        tableRowClassName({row, rowIndex}) {
            if (rowIndex === 1) {
            return 'warning-row';
            } else if (rowIndex === 3) {
            return 'success-row';
            }
            return '';
        },
        ///////搜索
        onSearch(){
            this.getList();
        },
        ////////获取分类列表
        getList() {
            this.tableloading = true;
            let formData = {
                start : this.pageIndex,
                length : this.pageSize,
                search : this.formInline.id
            }
            setTimeout(() => {
                getResourceTypeDataTable(formData).then(response => {
                    if (response.data) {
                        this.tableData = response.data;
                        this.dataTotal = response.recordsTotal;
                        this.tableloading = false;
                    } else {
                        this.tableloading = false;
                    // this.$message.error(response.message);
                    }
                }, response => {
                });
            }, 500);
        },
        ////////查询详情
        getDetail(typeId){
            let formData = {
                typeId : typeId
            }
            getResourceTypeDetail(formData).then(response => {
                if (response.data) {
                   this.role.typeId = response.data.typeId;
                   this.role.name = response.data.typeName;
                   this.role.rank = response.data.ranking;
                } else {
                // this.$message.error(response.message);
                }
            }, response => {

            });
        },
        ///////创建分类
        submitForm(formName) {
            this.isLoading = true;
            this.$refs[formName].validate((valid) => {
            if (valid) {
                let formData = {
                    typeName : this.ruleForm.name,
                    ranking : this.ruleForm.region
                }
                addResourceType(formData).then(response => {
                    if (response.code  == '0') {
                        this.isLoading = false;
                        this.getList();
                    } else {
                    this.$message.error(response.message);
                    }
                    this.ruleForm.name = '';
                    this.ruleForm.region = '';
                }, response => {

                });
            } else {
                return false;
            }
            });
        },
        /////编辑分类
        handleEdit(scope) {
            this.dialogVisible = true
            this.$nextTick(() => {
                this.getDetail(scope.row.typeId);
            })
        },
        /////确定删除分类
        handleDelete({ $index, row }) {
            this.$confirm('确定要删除吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async() => {
                this.deleteTYPE(row.typeId);
                this.$message({
                    type: 'success',
                    message: '删除!'
                })
            })
            .catch(err => { console.error(err) })
        },
        ///////确定编辑分类
        edited(){
            let that = this;
            let formData = {
                typeId : this.role.typeId,
                typeName : this.role.name,
                ranking : this.role.rank
            }
            editedType(formData).then(response => {
                if ('0' == response.code) {
                    setTimeout(() => {
                        that.getList();
                        that.role.typeId ='';
                        that.role.name ='';
                        that.role.rank ='';
                    }, 500);
                } else {
                // this.$message.error(response.message);
                }
            }, response => {

            });
        },
        ///////删除分类
        deleteTYPE(typeId){
            let formData = {
                typeId : typeId
            }
            deleteType(formData).then(response => {
                if ('0' == response.code) {
                    this.getList();
                } else {
                // this.$message.error(response.message);
                }
            }, response => {

            });
        },
        cancel(){
            this.dialogVisible = false;
        },
        confirm() {
            this.edited();
            this.dialogVisible = false
            this.$notify({
                title: '成功',
                type: 'success'
            })
        },
      //////重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    mounted(){
       this.getList();
    }
}
</script>
<style lang="scss" scope>
       .title{
            font-weight: bold;
            color: #9e9e9e;
            padding: 10px 0;
            margin: 20px 0 40px 0;
            border-bottom: 1px solid #E0E0E0;
       }
       .block{
            margin: 20px 0;
            float: right;
       }
          .filelist{
            border: 1px solid #ccc;
            border-radius: 5px;
            position: relative;
            overflow: hidden;
            .posterimg{
                display: block;
                width: 100px;
                height: 100px;
                font-size: 80px;
                text-align: center;
                float: left;
                margin: 0 20px 0 0;
            }
            .el-icon-delete{
                font-size: 25px;
                width: 30px;
                height: 30px;
                margin-top: 40px;
                position: absolute;
                right: 10%;
                top: 0;
                cursor: pointer;
            }
            h5{
                line-height: 100px;
            }
        }

</style>>